<!DOCTYPE html>
<html>
  
  <head data-gwd-animation-mode="proMode">
    <title>Navigation dans les évaluations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="../js/d3.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!--   
    -->
    <script type="text/javascript" src="../js/treeBranche.js"></script>
    <script type="text/javascript" src="../js/zoom.js"></script>
    <script type="text/javascript">
    	var utis = <?php echo json_encode($this->utis); ?>;
    	var docs = <?php echo json_encode($this->docs); ?>;
    	var tags = <?php echo json_encode($this->tags); ?>;
    	var links = <?php echo json_encode($this->links); ?>;
    	var idBase = '<?php echo $this->idBase; ?>';
		var svg, svgGroup;
		var visDocText;
		var distCielTerre = 300;
		var tempo = 10000;
		var xMid = 400;
		var nbDoc = docs.length;
		var pas=110, exaSize=100;

		//pour bouger un élément dessus
		d3.selection.prototype.moveToFront = function() {
			  return this.each(function(){
			    this.parentNode.appendChild(this);
			  });
			};
					
		function init(){
	    	//création du svg
	        svg = d3.select("#viz")
		        .append("svg:svg")
	    	    .attr("width", 800)
	        	.attr("height", 440)
		        .attr("class", "overlay")
		        .call(zoomListener);
		    // Append a group which holds all nodes and which the zoom Listener can act upon.
		    svgGroup = svg.append("g");

	    	creaDocs();
	    	creaUtis();
	    	creaTags();
		 	creaLinks();
		 	
		}

		function creaDocs(){
			var y = 10, fontSize=20;
			visDocText = svgGroup.selectAll(".gDoc")
		      .data(docs)
		      .enter()
		      .append("g")
				.attr("class", "gDoc")	            
				.attr("id", function(d, i) {  return "gDoc"+d.doc_id; })
		      .on("mouseover", function(d){
	            	/* enhance all the links that end here
	                enhanceNode (d);
	                d3.select(this)
	                    .style('fill',control.options.routeFocusStroke);
                    */
                    console.log(d.data);
	            });
			visDocText.append("svg:text")
	            .attr("x", function(d, i) {
	                return xMid;
	            })
	            //pour l'apparition
	            //.attr("y", -distCielTerre)	            
	            //pour la pluie
	            .attr("y", function(d, i) {
	                return y-(distCielTerre*i);
	            })
	            //
				.attr("class", function(d) { 
		    	  return "txtDoc"; 
		    	 })
	            .style("font-size",fontSize + "px")
	            .text(function(d) {
	                return d.data;
	            })
		      .attr("text-anchor", "middle");
            var txtFrere;
			visDocText.append("svg:rect")
	            .attr("x", function(d, i) {
	            	txtFrere = this.parentElement.childNodes[0]
	                return txtFrere.offsetLeft-fontSize;
	            })
	            //pour l'apparition
	            //.attr("y", -distCielTerre-fontSize)
	            //pour la pluie
	            .attr("y", function(d, i) {
	                return y-(distCielTerre*i)-fontSize;
	            })
	            //
			    .style("fill","none")
			    .style("stroke","black")
	            .attr("width", function(d, i) {
	            	txtFrere = this.parentElement.childNodes[0]
	            	d.w = txtFrere.offsetWidth+(fontSize*2);
	                return d.w;
	            })
	            .attr("height", function(d, i) {
	            	txtFrere = this.parentElement.childNodes[0]
	            	d.h = txtFrere.offsetHeight+(fontSize/2);
	                return d.h;
	            });
            //
			visDocText.transition()
				    .duration(0)
				    .style("font-size",fontSize + "px")
				    //.each("end", apparitionIci);				    
				    .each("end", pluieContinu);
	         //   
		}

		function pluieRetour(d, i) {
			  d3.select(this)
			    .transition()
			    .ease("linear")
			    .duration(0)
			    .attr("transform", function(d) {return "translate(0, 0)";})
			    .each("end", pluieContinu);
			}		 
		function pluieContinu(d, i) {
			var idDoc = this.__data__.doc_id;
			var trans = d3.select(this)
			  	.transition()
			    .duration(docs.length*distCielTerre*60)
			    .ease("linear")
			    .attr("transform", function(d) {return "translate(0, "+(docs.length*distCielTerre)+")";})
			    .each("end", pluieRetour);
			trans.each(function(d, i) {
			      console.log(i);
		          });
		          
		    /*
		    var bb = d3.select("#gDoc"+idDoc)[0][0].getBBox();
			d3.select("#gLink"+idDoc)
			  	.transition()
			    .duration(docs.length*distCielTerre*20)
			    .ease("linear")
			    .attr("d", function(d) {
					var docLien = d3.select("#gDoc"+idDoc)[0][0];
					var nd = "m 400,"+docLien.offsetTop+" 600,"+distCielTerre; 
			    	return nd;
				    })
			    .each("end", pluieRetour);	    
		    */							  
		}		 

		function apparitionWait(d, i) {
			d3.select(this)
			  	.transition()
			    .duration(tempo*nbDoc)
			    .ease("linear")
			    .each("end", apparitionIci);
		}		 
		function apparitionIci(d, i) {
			d3.select(this)
			  	.transition()
			  	.delay(tempo*i)
			    .duration(1)
			    .ease("linear")
			    .attr("transform", function(d) {return "translate(0, "+distCielTerre*1.5+")";})
			    .each("end", apparitionContinu);
		}		 
		
		function apparitionContinu(d, i) {
			var scale = 4;
			d3.select(this)
			  	.transition()
			    .duration(tempo)
			    .ease("ease")
			    .attr("transform", function(d) {
				    return "scale("+scale+","+scale+")translate(-"+(d.w/scale)+","+(distCielTerre*1.5-(d.h*scale))+")";
				    })
			    .each("end", apparitionRetour);
		}		 
		function apparitionRetour(d, i) {
			d3.select(this)
			    .transition()
			    .ease("linear")
			    .duration(0)
				//.attr("transform", "translate(0, "+-distCielTerre+")")
	    	    .attr("transform", "scale(0,0)")
			    .each("end", apparitionWait);
			}		 
		
		

		function creaUtis() {
			var y = 240;
			//création du cercle de l'intériorité
			svgGroup.append("svg:circle")
			    .attr("cx",400)
			    .attr("cy",8240)
			    .attr("r",8000)
			    .style("fill","black");

			//création des utilisateurs
			var visUtiExa = svgGroup.selectAll(".clsUti")
		      	.data(utis)
				.enter()
		        .append('svg:g')
		        .attr("id", function(d, i) {  return "gUti"+d.uti_id; })	            
		        .attr("class", "clsUti");
	        //création de l'exagone
			visUtiExa.append('svg:polygon')
		        .classed('tile', true)
			    .style("stroke","white")
		        .attr('points', function(d, i) {
			        var x = alterneX(pas, i); 			        
			        return hex([x,y], exaSize, false).join(' ');
		        });
	        //création du texte		    
			visUtiExa.append("svg:text")
		        	.attr("text-anchor", "middle")
		        	.style("font-size", 16)
				    .style("fill","white")
				    .attr("x",function(d, i) { 
					    return alterneX(pas, i); 
					    })
				    .attr("y",y)
				    .text(function(d) { 
				    	return d.login; 
				    	});
	        //création de l'arbre des documents pour chaque utilisateur
			utis.forEach(function(u, i) {
				var g = svgGroup.select("#gUti"+u.uti_id); 
			    var bbUti = g[0][0].getBBox();
			    var x = bbUti.x+(bbUti.width/2)+12;
			    var y = bbUti.y;	
			    if(i==0)				
				 	var dndT = new treeBranche({svgGroup:svgGroup, id:"dndT_"+u.uti_id, url:"../data/flare.json", x:x, y:y, w:0, h:0});
		    });		        				
	
		}
		
		function alterneX(pas, i) {
	        //placement alterné droite-gauche
	        var x;
	        if (i%2 == 0){
		       if(i>1)i--;
			   x = xMid+(pas*i);
	        }else{
			   if(i>1)i--;
			   x = xMid-(pas*i);
	        }
			return x;
		}

		function creaTags() {
			var x = 100, y = 360, pas=70, bulleSize=30;
			var visTagBulle = svgGroup.selectAll(".gTag")
		      	.data(tags)
				.enter()
		        .append('g')
		        .attr("id", function(d, i) {  return "gTag"+d.tag_id; })	            
		        .attr("class","gTag") ;
			visTagBulle.append('svg:circle')
		      .attr("cx", function(d,i) { 
			      return x+(pas*i); 
			      })
		      .attr("cy", function(d, i) { 
		    	  return y
			      })
		      .attr("r", function(d) { return bulleSize; })
		      .style("fill","white")
		      .style("stroke","black")
		      ;
			visTagBulle.append("svg:text")
		        	.attr("text-anchor", "middle")
			        .attr("id", function(d, i) {  return "gTagTxt"+d.tag_id; })	            
		        	.style("font-size", 16)
				    .style("fill","black")
				    .attr("x",function(d,i) { 
					      return x+(pas*i); 
				      })
				    .attr("y", y)
				    .text(function(d) { 
				    	return d.code; 
				    	});
	        
		}
		function hex(centroid, size, tilted) {
		    var a = size / 2, 
		        b = (Math.sqrt(3) * a) / 2,
		        x = centroid[0],
		        y = centroid[1];
		    return tilted
		        ? [[x - a / 2, y - b], [x - a, y], [x - a / 2, y + b], [x + a / 2, y + b], [x + a, y], [x + a / 2, y - b]]
		        : [[x - b, y - a / 2], [x - b, y + a / 2], [x, y + a], [x + b, y + a / 2], [x + b, y - a / 2], [x, y - a]];
		}

		function creaLinks() {
			var x = 200, y = 360, pas=70;
			var visLinksPath = svgGroup.selectAll(".gLink")
		      	.data(links)
				.enter()
		        .append('svg:path')
		        .attr("id", function(d) {  
			        return "gLink"+d.utitagdoc_id; 
			        })	            
		        .attr("class","gLink")
			    .attr("d", function(d,i) { 
				    //récupère les pôles du lien
				    var gUti = d3.select("#gUti"+d.uti_id);
				    var bbUti = gUti[0][0].getBBox()
				    var gTag = d3.select("#gTagTxt"+d.tag_id);
				    var bbTag = gTag[0][0].getBBox();
				    //construction du lien
				    var d = "M "+(bbTag.x+(bbTag.width/2))+","+bbTag.y //on part du centre du tag
				    	+" "+(bbUti.x+(bbUti.width/2))+","+(bbUti.y+bbUti.height) //on va au bas de l'exagone
				    	+" "+(bbUti.x+(bbUti.width/2))+","+(bbUti.y-32) //on va au dessus de l'exagone
				    	+" "+10*i+",10"; // on fini en haut de droite à gauche				    	
			      	return d;
			      	//return "m 400,0 "+(x+(pas*i))+","+y+" 10,10 20,20";
			      })
		      .style("stroke","red")
		      .style("fill","none")
		      .style("stroke-width",2)
		      ;
			//remet l'utilisateur au premier plan
			var utis = d3.selectAll(".clsUti");
		    utis.moveToFront();
		    //création des liens
		    
		}
    	
    </script>
    <style type="text/css">
      html, body {
        width: 800px;
        height: 440px;
        margin: 0px;
      }
	
	.node {
	    cursor: pointer;
	  }
	
	  .overlay{
	      background-color:#EEE;
	  }
	   
	  .node circle {
	    fill: #fff;
	    stroke: steelblue;
	    stroke-width: 1.5px;
	  }
	   
	  .node text {
	    font-size:10px; 
	    font-family:sans-serif;
	  }
	   
	  .link {
	    fill: none;
	    stroke: #ccc;
	    stroke-width: 1.5px;
	  }
	
	  .templink {
	    fill: none;
	    stroke: red;
	    stroke-width: 3px;
	  }
	
	  .ghostCircle.show{
	      display:block;
	  }
	
	  .ghostCircle, .activeDrag .ghostCircle{
	       display: none;
	  }
      	      
    </style>
  </head>
  
  <body onload="init()" >
  	<div id="viz">
  	</div>  
  </body>
</html>